<template>
  <div class="code-contain-main">
    <div v-for="w in messObj.words" :key="w" class="shower-holder">
      <div class="show-color" v-if="messObj.keywords.includes(w)">{{ w }}</div>
      <div v-else>{{ w }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, onBeforeMount, defineProps } from "vue";
import { fetchUrl } from "../apis/config";
import { codeSnippetProps } from "../types";

const props = defineProps<{
  code: codeSnippetProps;
}>();

let messObj = reactive({
  words: [""],
  keywords: [""],
});

const getKeysList = () => {
  fetch(`${fetchUrl}/keys/python2`).then((res) => {
    res.json().then((jsonText) => {
      console.log(jsonText);
      messObj.keywords = jsonText.keyword;
    });
  });
};

onBeforeMount(() => {
  getKeysList();
  console.log(props.code);
  messObj.words = props.code.code.split(" ");
});
</script>

<style scoped>
.show-color {
  color: red;
}

.shower-holder {
  display: flex;
  justify-content: space-around;
}

.code-contain-main {
  border: #2c3e50 2px dashed;
}
</style>
